import {
  ref
} from 'vue'

export default function usePasswordLoginRule() {
  //准备一个和校验项一致的双向绑定数据
  const form = ref({
    phone: '',
    password: '',
    captcha: '',
    agree: false,
  })

  //准备一个校验规则
  const rules = {
    //每一个表单项对应一个数组，数组内可以定义多个对象
    phone: [{
        required: true,
        message: '手机号不能为空',
        trigger: 'blur'
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号',
        trigger: 'blur'
      },
    ],
    password: [{
        required: true,
        message: '密码不能为空',
        trigger: 'blur'
      },
      {
        min: 9,
        max: 20,
        message: '密码不能小于9位或大于20位',
        trigger: 'blur'
      },
    ],
    captcha: [{
        required: true,
        message: '验证码不能为空',
        trigger: 'blur'
      },
      {
        min: 4,
        max: 4,
        message: '验证码长度为4位',
        trigger: 'blur'
      }
    ],
    agree: [{
      //rule是规则，value是当前的值，callback是当值变化时会调用的一个方法
      validator: (rule, value, callback) => {
        value === false ? callback(new Error('请同意用户协议')) : callback()
      },
    }],
  }

  return {
    form,
    rules
  }

}